<template>
  <div class="facility-upgrade">
    <div class="header">
      <router-link to="/main/wuye/facility/process" class="back-btn">
        <i class="el-icon-arrow-left"></i>
        <span>返回</span>
      </router-link>
      <h2>更换升级</h2>
    </div>

    <div class="content">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="待更换" name="pending">
          <el-table :data="pendingList" style="width: 100%">
            <el-table-column prop="deviceNo" label="设备编号" width="180"></el-table-column>
            <el-table-column prop="deviceName" label="设备名称" width="150"></el-table-column>
            <el-table-column prop="location" label="设备位置" width="180"></el-table-column>
            <el-table-column prop="upgradeType" label="更换类型" width="120">
              <template slot-scope="scope">
                <el-tag :type="getUpgradeType(scope.row.upgradeType)">
                  {{ scope.row.upgradeType }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="reason" label="更换原因" width="180"></el-table-column>
            <el-table-column label="操作" width="200">
              <template slot-scope="scope">
                <el-button size="mini" @click="viewDetail(scope.row)">查看</el-button>
                <el-button size="mini" type="primary" @click="startUpgrade(scope.row)">更换</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="已更换" name="completed">
          <el-table :data="completedList" style="width: 100%">
            <el-table-column prop="deviceNo" label="设备编号" width="180"></el-table-column>
            <el-table-column prop="deviceName" label="设备名称" width="150"></el-table-column>
            <el-table-column prop="newDeviceNo" label="新设备编号" width="180"></el-table-column>
            <el-table-column prop="upgradeStaff" label="更换人员" width="120"></el-table-column>
            <el-table-column prop="upgradeTime" label="更换时间" width="180"></el-table-column>
            <el-table-column label="操作" width="120">
              <template slot-scope="scope">
                <el-button size="mini" @click="viewDetail(scope.row)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>

    <!-- 详情对话框 -->
    <el-dialog title="设备更换详情" :visible.sync="detailDialogVisible" width="60%">
      <div class="device-detail" v-if="currentDevice">
        <el-descriptions title="原设备信息" :column="2" border>
          <el-descriptions-item label="设备编号">{{ currentDevice.deviceNo }}</el-descriptions-item>
          <el-descriptions-item label="设备名称">{{ currentDevice.deviceName }}</el-descriptions-item>
          <el-descriptions-item label="设备位置">{{ currentDevice.location }}</el-descriptions-item>
          <el-descriptions-item label="设备型号">{{ currentDevice.model }}</el-descriptions-item>
          <el-descriptions-item label="使用年限">{{ currentDevice.usageYears }}年</el-descriptions-item>
          <el-descriptions-item label="购置日期">{{ currentDevice.purchaseDate }}</el-descriptions-item>
        </el-descriptions>

        <div class="detail-section" v-if="currentDevice.newDevice">
          <h4>新设备信息</h4>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="设备编号">{{ currentDevice.newDevice.deviceNo }}</el-descriptions-item>
            <el-descriptions-item label="设备名称">{{ currentDevice.newDevice.deviceName }}</el-descriptions-item>
            <el-descriptions-item label="设备型号">{{ currentDevice.newDevice.model }}</el-descriptions-item>
            <el-descriptions-item label="生产厂家">{{ currentDevice.newDevice.manufacturer }}</el-descriptions-item>
            <el-descriptions-item label="购置日期">{{ currentDevice.newDevice.purchaseDate }}</el-descriptions-item>
            <el-descriptions-item label="质保期限">{{ currentDevice.newDevice.warranty }}</el-descriptions-item>
          </el-descriptions>
        </div>

        <div class="detail-section">
          <h4>更换原因</h4>
          <p>{{ currentDevice.reason }}</p>
        </div>

        <div class="detail-section" v-if="currentDevice.upgradeHistory">
          <h4>更换记录</h4>
          <el-timeline>
            <el-timeline-item
              v-for="(record, index) in currentDevice.upgradeHistory"
              :key="index"
              :timestamp="record.time">
              {{ record.staff }} - {{ record.action }}
              <p class="upgrade-content">{{ record.content }}</p>
              <p v-if="record.remark" class="upgrade-remark">备注：{{ record.remark }}</p>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
    </el-dialog>

    <!-- 更换表单对话框 -->
    <el-dialog title="设备更换" :visible.sync="upgradeDialogVisible" width="50%">
      <el-form :model="upgradeForm" label-width="100px">
        <el-form-item label="新设备信息">
          <el-descriptions :column="2" border size="small">
            <el-descriptions-item label="设备编号">
              <el-input v-model="upgradeForm.newDeviceNo" size="mini"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="设备名称">
              <el-input v-model="upgradeForm.newDeviceName" size="mini"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="设备型号">
              <el-input v-model="upgradeForm.model" size="mini"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="生产厂家">
              <el-input v-model="upgradeForm.manufacturer" size="mini"></el-input>
            </el-descriptions-item>
          </el-descriptions>
        </el-form-item>

        <el-form-item label="购置费用">
          <el-input-number v-model="upgradeForm.cost" :min="0" :precision="2"></el-input-number>
          <span class="unit">元</span>
        </el-form-item>

        <el-form-item label="质保期限">
          <el-input-number v-model="upgradeForm.warrantyYears" :min="1" :max="10"></el-input-number>
          <span class="unit">年</span>
        </el-form-item>

        <el-form-item label="安装调试">
          <el-checkbox-group v-model="upgradeForm.installItems">
            <el-checkbox label="设备安装">设备安装</el-checkbox>
            <el-checkbox label="管道连接">管道连接</el-checkbox>
            <el-checkbox label="电路接入">电路接入</el-checkbox>
            <el-checkbox label="系统调试">系统调试</el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="原设备处理">
          <el-radio-group v-model="upgradeForm.disposalMethod">
            <el-radio label="回收">回收</el-radio>
            <el-radio label="报废">报废</el-radio>
            <el-radio label="转售">转售</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="更换说明">
          <el-input type="textarea" v-model="upgradeForm.remark" rows="4"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="upgradeDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitUpgrade">提 交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'pending',
      pendingList: [
        {
          deviceNo: 'SB202403001',
          deviceName: '中央空调主机',
          location: 'A栋-设备间',
          model: 'KFR-72LW',
          usageYears: 8,
          purchaseDate: '2016-03-15',
          upgradeType: '设备老化',
          reason: '设备使用年限已超过8年，多次维修后仍存在故障，建议更换新设备'
        }
      ],
      completedList: [],
      detailDialogVisible: false,
      upgradeDialogVisible: false,
      currentDevice: null,
      upgradeForm: {
        newDeviceNo: '',
        newDeviceName: '',
        model: '',
        manufacturer: '',
        cost: 0,
        warrantyYears: 1,
        installItems: [],
        disposalMethod: '回收',
        remark: ''
      }
    }
  },
  methods: {
    getUpgradeType(type) {
      const map = {
        '设备老化': 'warning',
        '性能升级': 'success',
        '强制报废': 'danger'
      }
      return map[type] || 'info'
    },
    viewDetail(row) {
      this.currentDevice = row
      this.detailDialogVisible = true
    },
    startUpgrade(row) {
      this.currentDevice = row
      this.upgradeForm = {
        newDeviceNo: '',
        newDeviceName: row.deviceName,
        model: '',
        manufacturer: '',
        cost: 0,
        warrantyYears: 1,
        installItems: [],
        disposalMethod: '回收',
        remark: ''
      }
      this.upgradeDialogVisible = true
    },
    submitUpgrade() {
      if (!this.upgradeForm.newDeviceNo || !this.upgradeForm.model || !this.upgradeForm.manufacturer) {
        this.$message.error('请填写完整的新设备信息')
        return
      }

      // TODO: 提交更换信息到后端
      const upgradeRecord = {
        time: new Date().toLocaleString(),
        staff: '当前用户',
        action: '设备更换',
        content: `更换为新设备(${this.upgradeForm.newDeviceNo})`,
        remark: this.upgradeForm.remark
      }

      this.currentDevice.upgradeHistory = this.currentDevice.upgradeHistory || []
      this.currentDevice.upgradeHistory.unshift(upgradeRecord)

      // 从待更换列表移动到已更换列表
      const index = this.pendingList.findIndex(item => item.deviceNo === this.currentDevice.deviceNo)
      if (index > -1) {
        const device = { ...this.currentDevice }
        device.newDeviceNo = this.upgradeForm.newDeviceNo
        device.upgradeStaff = upgradeRecord.staff
        device.upgradeTime = upgradeRecord.time
        device.newDevice = {
          deviceNo: this.upgradeForm.newDeviceNo,
          deviceName: this.upgradeForm.newDeviceName,
          model: this.upgradeForm.model,
          manufacturer: this.upgradeForm.manufacturer,
          purchaseDate: new Date().toLocaleDateString(),
          warranty: `${this.upgradeForm.warrantyYears}年`
        }
        this.pendingList.splice(index, 1)
        this.completedList.unshift(device)
      }

      this.$message.success('设备更换完成')
      this.upgradeDialogVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.facility-upgrade {
  padding: 20px;

  .header {
    margin-bottom: 30px;
    position: relative;
    text-align: center;

    .back-btn {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      text-decoration: none;
      color: #606266;
      display: flex;
      align-items: center;
    }

    h2 {
      margin: 0;
      font-size: 24px;
      color: #303133;
    }
  }

  .content {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  }

  .detail-section {
    margin-top: 20px;

    h4 {
      margin: 0 0 10px;
      color: #303133;
    }

    .upgrade-content {
      margin: 5px 0 0;
      color: #606266;
    }

    .upgrade-remark {
      margin: 5px 0 0;
      font-size: 13px;
      color: #909399;
    }
  }

  .unit {
    margin-left: 10px;
    color: #606266;
  }
}
</style> 